require('./PageFaultreport.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Group, SelectField, TextField, TextareaField, Button, Boxs, Toast } = SaltUI;
const { HBox, Box } = Boxs;
import Addpersonfield from 'components/addpersonfield'
import { Control } from 'react-keeper'
const Fileselect = require('components/fileselect')
const classNames = require("classnames")

class Faultreport extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            upfileName: [],
            upimageName: [],
            proNum: ""
        };
        this.fileName = [];
        this.content = {};
        this.data = [
            { name: "输入故障情况描述", formOption: 'proDescribe' },
            { name: "输入故障代码", formOption: 'proCode' },
            { name: "上传附件", formOption: 'upfileName' },
            { name: "上传图片", formOption: 'upimageName' }
        ]
    }
    handleTextChange(name, newValue) {
        if (name == 'proName') {
            this.setState({
                proNum: this.state.proNumAll[newValue.value],
                folder_id: this.state.folderId[newValue.value],
                proj_webhook: this.state.webhookAll[newValue.value],
            })
        }
        this.setState({
            [name]: newValue
        });
    }
    handleAddpersonCb(names) {
        this.content.spr = names
    }
    handleAddpersonCs(names) {
        this.content.csr = names
    }
    handleAddpersonUnionid(unionids) {
        this.content.approvers_id = unionids
    }
    handlecsrUnionid(unionids) {
        this.content.cc_list_id = unionids
    }
    formSubmit() {
        var formName = [{ label: '项目名称', name: 'proName' }, { label: '输入故障情况描述', name: 'proDescribe' }];
        var boo = false;
        for (var i = 0; i < formName.length; i++) {
            if (!this.state[formName[i].name]) {
                boo = false;
                Toast.show({
                    type: 'error',
                    content: formName[i].label + "不能为空",
                });
                break;
            } else {
                boo = true;
            }
        }
        if (!this.state.path_name) {
            Toast.show({
                type: 'error',
                content: `文件存储区域不能为空`
            });
            return;
        }
        if (this.state.upfileName.length == 0) {
            Toast.show({
                type: 'error',
                content: `附件不能为空`
            });
            return;
        }
        if (this.state.upimageName.length == 0) {
            Toast.show({
                type: 'error',
                content: `上传图片不能为空`
            });
            return;
        }
        if (!this.content.spr || this.content.spr.length < 2) {
            boo = false;
            Toast.show({
                type: 'error',
                content: "请选择两个审批人",
            });
        }

        this.content.proj_webhook = this.state.proj_webhook
        if (boo) {
            if (this.props.pagedata) {
                Actions.sendForm({ node: this.data, data: this.state, pagedata: this.props.pagedata, edit: this.props.edit }, this.content, boo);
            } else {
                Actions.sendForm({ node: this.data, data: this.state }, this.content)
            }
        }
    }
    setPathName(path_name) {
        this.setState({ path_name })
    }
    getFileData(type, data, pathname) {
        if (type == 'image') {
            this.setState({
                upimageName: data,
                path_name: pathname
            })
        } else {
            this.setState({
                upfileName: data,
                path_name: pathname
            })
        }
    }


    render() {
        let t = this;
        return (
            <div className="faultreport myform">
                <Group.List >
                    <SelectField
                        label="项目名称"
                        placeholder="请选择"
                        className="photoBox"
                        options={this.state.proNameAll}
                        value={t.state.proName}
                        readOnly={this.props.edit}
                        onSelect={t.handleTextChange.bind(t, 'proName')}
                    />
                    <TextField
                        label="项目编号"
                        value={t.state.proNum}
                        readOnly={true}
                        onChange={t.handleTextChange.bind(t, 'proNum')}
                    />
                </Group.List>
                <Group.List >
                    <TextareaField
                        minRows={4} maxRows={10}
                        placeholder="输入故障情况描述"
                        value={t.state.proDescribe}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'proDescribe')}
                    />
                    <TextareaField
                        minRows={4} maxRows={10}
                        placeholder="输入故障代码"
                        value={t.state.proCode}
                        readOnly={this.props.edit}
                        onChange={t.handleTextChange.bind(t, 'proCode')}
                    />
                </Group.List>
                <Fileselect
                    ref='fileselect'
                    upfileName={this.state.upfileName}
                    upimageName={this.state.upimageName}
                    proName={this.state.proName}
                    edit={this.props.edit}
                    folder_id={this.state.folder_id}
                    process_folder={true}//是不是需要审批通过才存储文件
                    pathdata={this.state.pathdata}
                    path_name={this.state.path_name}
                    setPathName={this.setPathName.bind(this)}
                    getFileData={this.getFileData.bind(this)}
                    isShow={true}
                    message="maintenance-faultreq"
                />
                <Group.List>
                    <Addpersonfield
                        label={this.props.pagedata ? "审批人" : "发送给：乙方项目负责人-甲方验收人"}
                        cb={t.handleAddpersonCb.bind(t)}
                        union={t.handleAddpersonUnionid.bind(t)}
                        approvers={t.state.approvers}
                        approvers_id={t.state.approvers_id}
                        maxLength="2" />
                </Group.List>
                {this.props.pagedata && <Group.List>
                    <Addpersonfield
                        label="抄送人"
                        cb={t.handleAddpersonCs.bind(t)}
                        union={t.handlecsrUnionid.bind(t)}
                        approvers={t.state.cc_list}
                        approvers_id={t.state.cc_list_id}
                        maxLength="10"
                    />
                </Group.List>}
                <Button type="primary" className="submitBtn" onClick={t.formSubmit.bind(t)} >提交</Button>
            </div>
        );
    }

    componentWillMount() {
        var pagedata = {};
        if (this.props.pagedata) {
            pagedata.proName = this.props.pagedata.proName;
            pagedata.proNum = this.props.pagedata.proNum;
            pagedata.process_id = this.props.pagedata.process_id;
            pagedata.folder_id = this.props.pagedata.folder_id;
            for (let i = 0; i < this.props.pagedata.node_info.length; i++) {
                for (let j = 0; j < this.data.length; j++) {
                    if (this.props.pagedata.node_info[i].name == this.data[j].name) {
                        if (this.props.pagedata.node_info[i].name == "上传附件") {
                            try {
                                pagedata.upfileName = JSON.parse(this.props.pagedata.node_info[i].value);
                                pagedata.path_name = pagedata.upfileName[0].selected_folder_pathname;
                            } catch (e) {
                                pagedata.upfileName = [];
                            }
                        } else if (this.props.pagedata.node_info[i].name == "上传图片") {
                            try {
                                pagedata.upimageName = JSON.parse(this.props.pagedata.node_info[i].value);
                            } catch (e) {
                                pagedata.upimageName = [];
                            }
                        } else {
                            pagedata[this.data[j].formOption] = this.props.pagedata.node_info[i].value;
                        }
                    }
                }
            }
            this.content.change_id = this.props.pagedata.process_id;
            this.content.change_type = this.props.pagedata.changeType;
        }
        Object.assign(this.state, pagedata)
    }

    componentDidMount() {
        Actions.fetch();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.pagedata.approvers && nextProps.pagedata.approvers instanceof Array)
            this.setState({
                approvers: nextProps.pagedata.approvers,
                approvers_id: nextProps.pagedata.approvers_id,
            });
        else if (nextProps.pagedata.approvers && typeof nextProps.pagedata.approvers == 'string')
            this.setState({
                approvers: [nextProps.pagedata.approvers],
                approvers_id: [nextProps.pagedata.approvers_id]
            });
        if (nextProps.pagedata.cc_list && nextProps.pagedata.cc_list instanceof Array)
            this.setState({
                cc_list: nextProps.pagedata.cc_list,
                cc_list_id: nextProps.pagedata.cc_list_id
            });
        else if (nextProps.pagedata.cc_list && typeof nextProps.pagedata.cc_list == 'string')
            this.setState({
                cc_list: [nextProps.pagedata.cc_list],
                cc_list_id: [nextProps.pagedata.cc_list_id]
            })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
        this.setState({
            upfileName: [],
            upimageName: []
        })
    }
}

reactMixin.onClass(Faultreport, Reflux.connect(Store));

module.exports = Faultreport;
